<template>
    <div>

        <!--    呼唤菜单栏的按钮    -->
        <div class="btn">
            <svg t="1614497896574" class="icon" viewBox="0 0 1251 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="2222" width="20" height="20">
                <path d="M0 73.038516c0-40.901569 32.136947-73.038516 73.038516-73.038516h1105.803139c40.901569 0 73.038516 32.136947 73.038516 73.038516s-32.136947 73.038516-73.038516 73.038517H73.038516c-39.440799 0-73.038516-32.136947-73.038516-73.038517zM0 512.730385c0-40.901569 32.136947-73.038516 73.038516-73.038516h667.57204c40.901569 0 73.038516 32.136947 73.038517 73.038516s-32.136947 73.038516-73.038517 73.038517H73.038516c-39.440799 0-73.038516-33.597718-73.038516-73.038517zM0 950.961484c0-40.901569 32.136947-73.038516 73.038516-73.038517h853.089872c40.901569 0 73.038516 32.136947 73.038516 73.038517s-32.136947 73.038516-73.038516 73.038516H73.038516c-39.440799 0-73.038516-32.136947-73.038516-73.038516z"
                      p-id="2223" fill="#ffffff"></path>
            </svg>
        </div>

        <!--    返回主页的图标按钮    -->
        <template v-if="this.$route.path !='/'">
            <router-link to="/" class="btn2">
                <!--       home    -->
                <svg t="1615732951397" style="margin-left: 17px" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="3456" width="23" height="23">
                    <path d="M998.428444 381.112889l-469.333333-353.180445c-0.469333-0.355556-0.981333-0.568889-1.479111-0.896a28.017778 28.017778 0 0 0-2.417778-1.464888 29.909333 29.909333 0 0 0-10.453333-3.128889 30.705778 30.705778 0 0 0-5.475556-0.014223 28.771556 28.771556 0 0 0-13.112889 4.707556c-0.412444 0.284444-0.867556 0.469333-1.28 0.782222l-469.333333 353.180445a28.458667 28.458667 0 0 0 34.204445 45.468444l73.656888-55.424V854.186667c0 111.701333 29.141333 147.555556 136.803556 147.555555h483.555556c107.662222 0 147.640889-35.854222 147.640888-147.555555V379.320889l62.805334 47.260444c5.12 3.854222 11.121778 5.717333 17.080889 5.717334a28.444444 28.444444 0 0 0 17.137777-51.185778zM443.747556 674.673778H580.266667c31.288889 0 36.707556 0.554667 36.707555 28.8v241.422222H417.877333V703.473778c0-28.245333-5.418667-28.8 25.870223-28.8z m400.782222-327.111111v506.666666c0 81.365333-14.193778 90.666667-90.752 90.666667h-108.359111V703.473778c0-48.967111-23.850667-57.244444-65.152-57.244445h-136.519111c-41.301333 0-54.314667 8.277333-54.314667 57.244445v241.422222H270.222222c-76.572444 0-79.914667-9.301333-79.914666-90.666667V347.562667c0-5.788444-1.749333-11.150222-4.721778-15.644445L512 86.272l334.336 251.591111a28.231111 28.231111 0 0 0-1.806222 9.699556z"
                          fill="#e6e6e6" p-id="3457"></path>
                    <path d="M435.370667 230.499556L250.055111 373.617778c-3.512889 2.688-2.858667 6.855111-2.858667 11.278222v161.777778a14.222222 14.222222 0 1 0 28.444445 0V391.907556l178.730667-138.837334c6.243556-4.778667 5.034667-13.710222 0.256-19.939555a13.425778 13.425778 0 0 0-19.256889-2.631111zM261.418667 589.340444a14.222222 14.222222 0 0 0-14.222223 14.222223v14.222222a14.222222 14.222222 0 1 0 28.444445 0v-14.222222a14.222222 14.222222 0 0 0-14.222222-14.222223z"
                          fill="#e6e6e6" p-id="3458"></path>
                </svg>
            </router-link>
        </template>

        <div :class="[dark ? dark_btn_black: dark_btn_white]" @click="changeDark()"
             :style="{left:(this.$route.path !='/' ? 130+'px':80+'px')}">

        </div>

        <!--         隐藏的菜单栏-->

        <div class="ui right fixed vertical menu sidebar  panel_menu">
            <div class="img item" style="padding: 0px">
                <img style="margin:0px;padding: 0px" src="@/assets/img/menu/your_name.jpg">
            </div>
            <div class="ui huge circular image"
                 style="top:-45px;  width: 80px;left: 90px; height: 80px;padding:4px; background: rgba(255,255,255,0.4)">
                <img class="menu_head_img" src="@/assets/img/menu/head.jpg">
            </div>
            <div class="ui horizontal divider inverted ">
                label
            </div>
            <GetLabel></GetLabel>

            <div class="ui horizontal divider inverted ">
                navigate
            </div>

            <div class="ui  horizontal segments " style="background-color: rgba(0,0,0,.1);border-radius: 0px;margin: 0px;padding: 0px">
                <div class="ui segment " style="text-align: center;padding: 5px">
                    <router-link style="color: white" to="/open_urls"><p>open urls</p></router-link>
                </div>
                <div class="ui segment " style="text-align: center;padding: 5px">
                    <router-link style="color: white" to="/snow"><p>snow</p></router-link>
                </div>
            </div>
            <div class="ui  horizontal segments " style="background-color: rgba(0,0,0,.1);border-radius: 0px;margin: 0px;padding: 0px">
                <div class="ui segment " style="text-align: center;padding: 5px">
                    <router-link style="color: white" to="/games"><p>GAMES</p></router-link>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

    import GetLabel from "../../components/GetLabel";
    export default {
        name: "Menu",
        data() {
            return {
                dark_btn_black: 'dark_btn_black',
                dark_btn_white: 'dark_btn_white',
                styleObject: {
                    border: 0,
                    marginTop: this.numRandom(2, 16) + "px",
                }

            }
        },
        components:{
            GetLabel,
        },
        computed: {
            dark() {
                return this.$store.state.dark
            }
        },
        methods: {
            // labelTo(lab,index) {
            //     this.$router.push({ name:'classify', params:{sortName:lab}});
            //     $('.sidebar')
            //         .sidebar('setting', 'transition', 'push')
            //         .sidebar('hide');
            // },
            numRandom(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            colorRandom() {
                let labelColor = [
                    'red',
                    'orange',
                    'yellow',
                    'olive',
                    'green',
                    'teal',
                    'blue',
                    'violet',
                    'purple',
                    'pink',
                    'brown',
                    'grey',
                    'black'
                ];

                return labelColor[Math.floor(Math.random() * 10)];
            },
            changeDark() {
                this.$store.commit('toggleDark');
                this.$cookies.set('dark', this.$store.state.dark, '3d');
                console.log('cookie:' + this.$cookies.get('dark'));

            },

            //method结束------------------
        }
    }


    $(function () {
        //点击显示、隐藏菜单栏
        $('.btn').click(function () {
            $('.sidebar')
                .sidebar('setting', 'transition', 'push')
                .sidebar('toggle');
        });

        //旋转头像
        $('.menu_head_img').mouseenter(function () {
            $('.menu_head_img').toggleClass('menu_head_img_rotate')
        })
    })

</script>

<style scoped>
    .btn {
        cursor: pointer;
        position: absolute;
        top: 28px;
        left: 35px;
        /*border: 1px gray solid;*/
        border-radius: 2px;
        padding: 3px;
        min-width: 30px;

    }

    .dark_btn_white {
        position: absolute;
        top: 28px;
        /*left: 50px;*/
        width: 25px;
        height: 25px;
        margin-top: 13px;

        cursor: pointer;
        border-top: 2px solid white;
        border-left: 2px solid white;
        border-radius: 45px;
        background-color: rgba(255, 255, 0, .9);
        background-image: -webkit-linear-gradient(
                -40deg,
                rgba(255, 255, 255, 0.6) 25%,
                transparent 55%,
                    /*transparent 50%,*/ /*rgba(255, 255, 255, 0.4) 50%,*/ /*rgba(255, 255, 255, 0.4) 75%,*/ transparent 75%,
                transparent
        );
        /*opacity: .8;*/
    }

    .dark_btn_black {
        position: absolute;
        top: 38px;
        left: 50px;
        width: 23px;
        height: 23px;
        cursor: pointer;
        border-radius: 45px;

        background-color: rgba(0, 0, 0, 0);
        box-shadow: 3px 3px 1px #ffe21f;
        opacity: 1;
    }


    .btn2 {
        cursor: pointer;
        position: absolute;
        top: 26px;
        left: 60px;
        /*border: 1px gray solid;*/
        border-radius: 2px;
        padding: 3px;
        min-width: 30px;

    }

    .panel_menu {
        border: 0;
        background: rgba(0, 0, 0, 0.5) !important;
        color: white !important;
    }

    .menu_head_img_rotate {
        animation: circle 1s ease-out;
    }

    @keyframes circle {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>
